<template>
  <div>
    <van-tabbar route v-model="activeTab" inactive-color="#737373" active-color="#737373">
      <van-tabbar-item :to="pathSettingList.todo.main" name="todo">
        <span>待办</span>
        <template #icon="props">
          <svg width="24" height="24" viewBox="0 0 24 24" :fill="props.active ? '#FDDF68' : 'none'" fill-opacity="0.6" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.3701 8.87988H17.6201" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6.37988 8.87988L7.12988 9.62988L9.37988 7.37988" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12.3701 15.8799H17.6201" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M6.37988 15.8799L7.12988 16.6299L9.37988 14.3799" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="pathSettingList.product.main" name="product">
        <span>商品</span>
        <template #icon="props">
          <svg width="24" height="24" viewBox="0 0 24 24" :fill="props.active ? '#FDDF68' : 'none'" fill-opacity="0.7" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.01001 11.2197V15.7097C3.01001 20.1997 4.81001 21.9997 9.30001 21.9997H14.69C19.18 21.9997 20.98 20.1997 20.98 15.7097V11.2197" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 12C13.83 12 15.18 10.51 15 8.68L14.34 2H9.66999L8.99999 8.68C8.81999 10.51 10.17 12 12 12Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M18.31 12C20.33 12 21.81 10.36 21.61 8.35L21.33 5.6C20.97 3 19.97 2 17.35 2H14.3L15 9.01C15.17 10.66 16.66 12 18.31 12Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M5.63988 12C7.28988 12 8.77988 10.66 8.93988 9.01L9.15988 6.8L9.63988 2H6.58988C3.96988 2 2.96988 3 2.60988 5.6L2.33988 8.35C2.13988 10.36 3.61988 12 5.63988 12Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 17C10.33 17 9.5 17.83 9.5 19.5V22H14.5V19.5C14.5 17.83 13.67 17 12 17Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="pathSettingList.order.main" name="order">
        <span>订单</span>
        <template #icon="props">
          <svg width="24" height="24" viewBox="0 0 24 24" :fill="props.active ? '#FDDF68' : 'none'" fill-opacity="0.7" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.5 11.3V7.04001C20.5 3.01001 19.56 2 15.78 2H8.22C4.44 2 3.5 3.01001 3.5 7.04001V18.3C3.5 20.96 4.96001 21.59 6.73001 19.69L6.73999 19.68C7.55999 18.81 8.80999 18.88 9.51999 19.83L10.53 21.18" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M8 7H16" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9 11H15" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M18.211 14.7703L14.671 18.3103C14.531 18.4503 14.401 18.7103 14.371 18.9003L14.181 20.2503C14.111 20.7403 14.451 21.0803 14.941 21.0103L16.291 20.8203C16.481 20.7903 16.751 20.6603 16.881 20.5203L20.421 16.9803C21.031 16.3703 21.321 15.6603 20.421 14.7603C19.531 13.8703 18.821 14.1603 18.211 14.7703Z" stroke="#737373" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M17.6992 15.2803C17.9992 16.3603 18.8392 17.2003 19.9192 17.5003" stroke="#737373" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="isAdmin" :to="pathSettingList.report.main" name="report">
        <span>报表</span>
        <template #icon="props">
          <svg width="24" height="24" viewBox="0 0 24 24" :fill="props.active ? '#FDDF68' : 'none'" fill-opacity="0.7" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.32 12.0002C20.92 12.0002 22 11.0002 21.04 7.72018C20.39 5.51018 18.49 3.61018 16.28 2.96018C13 2.00018 12 3.08018 12 5.68018V8.56018C12 11.0002 13 12.0002 15 12.0002H18.32Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M19.9999 14.6998C19.0699 19.3298 14.6299 22.6898 9.57993 21.8698C5.78993 21.2598 2.73993 18.2098 2.11993 14.4198C1.30993 9.38977 4.64993 4.94977 9.25993 4.00977" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="pathSettingList.profile.main" name="profile">
        <span class="">我的</span>
        <template #icon="props">
          <svg width="24" height="24" viewBox="0 0 24 24" :fill="props.active ? '#FDDF68' : 'none'" fill-opacity="0.7" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      activeTab: "todo",
      pathSettingList: this.GLOBAL.pathSetting,
      isAdmin: this.$baseJS.getLoginUser().isAdmin,
    };
  },
  methods: {
  },
};
</script>

